<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title></title>

    <link rel="stylesheet" type="text/css" media="screen" href="<?= THEMEPATH ?>/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<?= THEMEPATH ?>/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<?= THEMEPATH ?>/css/front.css"/>

</head>
<body>
<div class="page">
    <?php

    $questions = json_decode($page['question'], true);
    $answers   = json_decode($page['answer'], true);
    $i         = 1;
    $an        = 'ABCDEF';
    $table     = '<div class="panel-group question-list">';
    foreach ($questions as $k => $q) {
        $an = 'ABCDEF';
        switch ($k) {
            case 1:
                $title = "单选题";
                $input = "radio";
                break;
            case 2:
                $title = "多选题";
                $input = "checkbox";
                break;
            case 3:
                $title = "判断题";
                $input = "radio";
                $an    = ['正确', '错误'];
                break;
            case 4:
                $title = "填空题";
                $input = "text";
                break;
            case 5:
                $title = "问答题";
                $input = "textarea";
                break;
        }
        echo <<<EOT
<div class="well bg-info">
    <h5 class="">{$title}</h5>
</div>
EOT;

        $table .= '<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title">' . $title . '</h4></div><div class="panel-body">';
        foreach ($q as $id => $question) {
            $ques = $this->db->select('name')->get_where('question', ['id' => $id])->row_array();
            echo <<<EOT
<div class="panel panel-primary" id="{$i}">
    <div class="panel-heading">
        <span class="title">{$i}、{$ques['name']}</span>
    </div>
    <div class="panel-body">
        <ol type="A" class="option">
EOT;
            foreach ($question['o'] as $option) {
                echo "<li>{$option['t']}";
                if (isset($option['a']) && $option['a'] == 't') echo "<i class='fa fa-check'></i> </li>";
            }
            echo <<<EOT
         </ol>
    </div>
    <div class="panel-footer">
    您的答案：
EOT;
            $image = 'error';
            if (isset($answers[$k][$id])) {
                if ($answers[$k][$id] == $question['a']) {
                    $image = 'right';
                }
                foreach ($answers[$k][$id] as $answer) {
                    echo $an[$answer];
                }
            } else {
                echo "<b>您未作答。</b>";
            }
            echo "<img class='pull-right answer_image' src='" . site_url("asset/images/{$image}.png") . "' />    </div></div>";
            $table .= '<button class="btn btn-xs ' . $image . '">' . $i . '</button>';
            $i++;
        }
        $table .= '</div></div>';
    }
    $table .= '</div>';
    echo $table;
    ?>
</div>
</body>
<!-- End Main -->
<script src="<?= THEMEPATH ?>/js/jquery.min.js"></script>

<!--[if lt IE 9]>
<script src="<?=THEMEPATH?>/js/html5shiv.min.js"></script>
<script src="<?=THEMEPATH?>/js/respond.min.js"></script>
<script src="<?=THEMEPATH?>/css/font-awesome-ie7.min.css"></script>
<![endif]-->
<script src="<?= THEMEPATH ?>/js/jquery.metisMenu.js"></script>
<script src="<?= THEMEPATH ?>/js/jquery.cookie.js"></script>
<script src="<?= THEMEPATH ?>/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('.question-list').on('click','button',function () {
            var id=$(this).text();
            window.location.href='#'+id;
        })
    });
</script>
</html>